<template>
  <h1>我是App组件</h1>
  <h3>姓名:{{ person.name }}</h3>
  <h3>年龄:{{ person.age }}</h3>
  <h3>工作种类:{{ person.job.type }}</h3>
  <h3>工作薪资:{{ person.job.salary }}</h3>
  <h3>爱好:{{ person.hobby }}</h3>
  <button @click="changeInfo">修改人的信息</button>
</template>

<script>
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    /*   let name = ref("张三");
    let age = ref(18);
    let job = reactive({
      type: "程序员",
      salary: "50K",
    });
    let hobby = reactive(["抽烟", "喝酒", "烫头"]); */
    let person = reactive({
      name: "张三",
      age: 18,
      job: {
        type: "程序员",
        salary: "50K",
      },
      hobby: ["抽烟", "喝酒", "烫头"],
    });
    function changeInfo() {
      person.name = "李四";
      person.age = 36;
      person.job.type = "项目经理";
      person.job.salary = "100K";
      person.hobby[0] = "学习";
    }
    return {
      person,
      changeInfo,
    };
  },
};
</script>

<style>
</style>
